<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Marked Emoji Test</title>
    <meta charset="UTF-8">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" href="../dist/css/editormd.min.css"/>
    <style>
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button,
        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            margin: 0;
            padding: 0;
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
            display: block;
        }

        audio, canvas, video {
            display: inline-block;
        }

        body, button, input, select, textarea {
            font: 12px/1.5 Tahoma, "Hiragino Sans GB", "Microsoft Yahei", Arial;
        }

        body {
            font-size: 12px;
            color: #666;
            background: #fff url(../images/) no-repeat left top;
        }

        body {
            font-size: 14px;
            color: #444;
            font-family: "微软雅黑", Arial;
            background: #fff;
            padding: 15px;
        }

        a {
            color: #444;
            text-decoration: none;
        }

        a:hover {
            color: #065BC2;
            text-decoration: none;
        }

        .clear {
            zoom: 1;
        }

        .clear:after {
            content: "";
            height: 0;
            visibility: hidden;
            clear: both;
            display: block;
        }

        img {
            border: none;
            vertical-align: middle;
        }

        ul, ol {
            margin-left: 18px;
        }

        table {
            margin: 10px 0;
            border-collapse: collapse;
        }

        table th, table td {
            padding: 5px 8px;
            border: 1px solid #ddd;
        }

        pre {
            padding: 8px;
            border-radius: 3px;
            border: 1px solid #ddd;
            background: #f6f6f6;
            margin: 15px 0;
            display: inline-block;
        }

        pre code {

        }

        .editormd-logo,
        .editormd-logo-4x {
            font-family: editormd-logo;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            font-size: inherit;
            line-height: 1;
            display: inline-block;
            text-rendering: auto;
            vertical-align: inherit;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .editormd-logo:before,
        .editormd-logo-4x:before {
            content: "\e1987";
        }

        .editormd-logo-4x {
            font-size: 4em;
        }
    </style>
</head>
<body>
<i class="editormd-logo editormd-logo-4x"></i><br/>
<pre id="md">&gt; Blockquotes
dasfsadfasdf:fa-edit: :warning: :smiley:dsafsdfsad\:fdsfdf\:f dfdf:   :fa-save::fa-star:  :fa-truck:
**fdfasd:smiley:dsfsdfsfd** ~~fsdfds:smiley:dfsdfsdf :fa-info:~~
*dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf*
___Emphasis :fa-gear: Italic:smiley:___  __Emphasis:smiley:__
# H1 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf
## H2 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf
### H3 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
#### H4 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
##### H5 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
###### H6 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-star:dsfsdf
[:smiley:](http://www.emoji-cheat-sheet.com/ "link + emoji") link + emoji
- dafssdfsdaf:smiley:dfsdfsdf
- dafssdfsdaf:smiley:dfsdfsdf     
    - dafssdfsdaf:smiley:dfsdfsdf
    - dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
- dafssd:  :fa-truck:fsdaf:smiley:dfsdfsdf :fa-star::  :fa-truck:
    + dafssdfsdaf:smiley:dfsdfsdf
    + dafss:fa-truck:dfsdaf:smiley:dfsdfsdf


1. :smiley:第一行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save::  :fa-truck:
    - dafssdfsdaf:smiley:dfsdfsdf
    - dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
2. :smiley:第二行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-star::  :fa-truck:
3. 第三行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save::  :fa-truck:

&gt; Blockquotes

&gt; dd:smiley:引用文本(Blockquotes:smiley:)fdasfad :fa-star:: dfd :fa-truck:

|:100: First Header  | Second:smiley: Header:smiley: |
| ------------- | ------------- |
| Content:fa-truck: Cell  | :smiley:Content Cell :smiley: |
| Con:fa-truck:tent Cell:bangbang:  | Content Cell dfsdfsdf :fa-star: :dfdf  :fa-truck: |

:fa-heart:fasdfsdfsfddffd:editormd-logo: :editormd-logo: :editormd-logo-4x:

    dfasfasdfasdf:bangbang:

This is an H1 :editormd-logo-4x:
=============

This  :fa-save::  :fa-truck:is an H2 :100:
-------------
</pre>
<script src="../examples/js/jquery.min.js"></script>
<script src="../lib/marked.min.js"></script>
<script type="text/javascript">

    $(function () {
        var markedRenderer = new marked.Renderer();
        var markdownToC = markdownToC || [];
        var emojiReg = /:([\-\w]+):/g;
        var faIconReg = /:fa-([\w]+):/g;
        var editormdLogoReg = /:(editormd-logo\s?-?(\w+)?):/g;

        console.log("markedRenderer =>", markedRenderer);

        markedRenderer.emoji = function (text) {
            console.log("emoji.text =>", text);
            var matchs = text.match(emojiReg);
            console.log(matchs);

            if (matchs) {
                for (var i = 0, len = matchs.length; i < len; i++) {
                    text = text.replace(new RegExp(matchs[i]), function ($1, $2) {
                        var faMatchs = $1.match(faIconReg);
                        //console.log("famatchs =>", faMatchs);
                        var name = $1.replace(/:/g, ""); // http://www.emoji-cheat-sheet.com/graphics/emojis/smile.png
                        console.log("replace =>", name, $1, $2);

                        if (faMatchs) {
                            for (var fa = 0, len1 = faMatchs.length; fa < len1; fa++) {
                                return "<i class=\"fa " + faMatchs[fa].replace(/:/g, "") + "\"></i>";
                            }
                        } else {
                            var emdlogoMathcs = $1.match(editormdLogoReg);

                            if (emdlogoMathcs) {
                                for (var x = 0, len2 = emdlogoMathcs.length; x < len2; x++) {
                                    return "<i class=\"" + emdlogoMathcs[x].replace(/:/g, "") + "\"></i>";
                                }
                            } else {
                                return "<img src=\"http://www.emoji-cheat-sheet.com/graphics/emojis/" + name + ".png\" />";
                            }
                        }
                        //return (faIconReg.test($1)) ? "<i class=\"fa "+name+"\"></i>" : (editormdLogoReg.test($1)) ? "<i class=\""+name+"\"></i>" : "<img src=\"http://www.emoji-cheat-sheet.com/graphics/emojis/"+name+".png\" />";
                    });
                }

                console.log(emojiReg.exec(text));
                console.log(text, emojiReg.test(text), faIconReg.test(text));
            }

            return text;
        };

        markedRenderer.blockquote = function (quote) {
            console.log("quote =>", quote);
            return "<blockquote>\n" + quote + "</blockquote>\n";
        };

        markedRenderer.tablecell = function (content, flags) {
            console.log(content);
            var type = flags.header ? "th" : "td";
            var tag = flags.align ? "<" + type + ' style="text-align:' + flags.align + '">' : "<" + type + ">";
            return tag + this.emoji(content) + "</" + type + ">\n";
        }

        markedRenderer.heading = function (text, level, raw) {
            return "<h" + level + ' id="' + this.options.headerPrefix + raw.toLowerCase().replace(/[^\w]+/g, "-") + '">' + this.emoji(text) + "</h" + level + ">\n"
        };

        markedRenderer.listitem = function (text) {
            return "<li>" + this.emoji(text) + "</li>\n";
        };

        markedRenderer.paragraph = function (text) {

            console.log("paragraph =>", text, text.match(emojiReg));
            return "<p>" + this.emoji(text) + "</p>\n";
        };

        marked.setOptions({
            renderer: markedRenderer,
            gfm: true,
            tables: true,
            breaks: true,
            pedantic: false,
            smartLists: true,
            smartypants: true
        });

        var mdsrc = $("#md").html();
        var md = marked(mdsrc);
        //console.log(mdsrc);

        $("body").append(md);
    });
</script>
</body>
</html>